<template>
  <div>
    <!-- 商品尺寸，颜色选择部分（不包括按钮部分） -->
    <div class="select-box" v-for="item in targetList" :key="item.gid" ref="box">
      <div class="close" @click="close">
        <span class="mui-icon mui-icon-close-filled"></span>
      </div>
      <div class="hd">
        <div class="hd-left">
          <img src alt>
        </div>
        <div class="hd-right">
          <p>
            <span>￥</span>
            <b>{{ item.price }}</b>
          </p>
          <p>库存 {{ item.stock }}件</p>
        </div>
      </div>
      <div class="bd">
        <div class="color">
          <p>颜色</p>
          <!-- 将商品id也一起传给父组件 -->
          <span
            @click="chooseColor(item.price,item.gid,$event,value.cid,value.cvalue)"
            ref="optionColor"
            v-for="value in item.color"
            :key="value.cid"
          >{{ value.cvalue }}</span>
        </div>
        <div class="size" ref="size" v-if="item.size">
          <p>尺码</p>
          <span
            @click="chooseSize(item.price,item.gid,$event,value.sid,value.svalue)"
            ref="optionSize"
            v-for="value in item.size"
            :key="value.sid"
          >{{ value.svalue }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 此数据根据id从服务器获取
      // goodsDetail: selectData,
      updateObj: {},
      targetList: []
    };
  },
  props: ["targetId"],
  created() {
    this.getTargetList(this.targetId);
  },
  methods: {
    close() {
      this.$emit("m_close");
    },
    getTargetList(id) {
      var url = "/select?id="+id;
      this.$http.get(url).then((res)=>{
        // console.log(res)
        this.targetList = res.data
      });
    },
    // 上一层渲染的数据在e和下一层渲染出的数据之前
    chooseColor(price, gid, e, cid, cvalue) {
      if (e.target.className == "selected") {
        e.target.className = "";
        this.updateObj.cid = "";
      } else {
        //不是循环生成的多个同名元素只获取最后一个
        var colorList = e.target.parentElement.children;
        // console.log(colorList);
        for (var i = 1; i < colorList.length; i++) {
          colorList[i].className = "";
        }
        e.target.className = "selected";
        // 获取元素文本，可以直接在方法内传入，或者通过innerText获取
        var obj = {
          gid: gid,
          cid: cid,
          price: price,
          storeId: gid.slice(0, 3),
          color: cvalue
        };
        // 响应式设置获取到的值
        this.updateObj = Object.assign(this.updateObj, obj);

        if (!this.updateObj.cid) {
          Toast("请选择颜色");
          return;
        }
        this.$emit("getColor", this.updateObj);
        // console.log(this.updateObj)
      }
    },
    // 将id同时颜色/尺码的选择返回给父组件，需要在两个方式都传，
    // 因为如果只有一个方法传值，这个方法在前面选择，则没办法将id传回===要响应式设置对象的数据才行
    // 颜色尺码也传id即可，具体值可以不传
    // 如果没有尺寸选择不会触发这个方法
    chooseSize(price, gid, e, sid, svalue) {
      if (e.target.className == "selected") {
        e.target.className = "";
        this.updateObj.sid = "";
      } else {
        var sizeList = e.target.parentElement.children;
        // i=0是p元素
        for (var i = 1; i < sizeList.length; i++) {
          sizeList[i].className = "";
        }
        e.target.className = "selected";
        var obj = {
          gid: gid,
          sid: sid,
          price: price,
          storeId: gid.slice(0, 3),
          solor: svalue
        };
        this.updateObj = Object.assign(this.updateObj, obj);
        
        if (!this.updateObj.sid) {
          Toast("请选择尺码");
          return;
        }
        this.$emit("getSize", this.updateObj);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$baseColor: #26a2ff;
.select-box {
  background: #fff;
  border-radius: 10px 10px 0 0;
  // 设置父组件宽度为100%，子组件也是100%，否则该组件设置具体的宽度px值，在安卓系统下，宽度无法自适应
  width: 100%;
  padding: 10px;
  border-top: 1px solid rgba(0,0,0,0.1);
  .close {
    position: absolute;
    top: 5px;
    right: 5px;
    span {
      color: #bbb;
    }
  }
  .hd {
    // padding: 10px;
    display: flex;
    .hd-left {
      width: 100px;
      height: 100px;
      background: skyblue;
    }
    .hd-right {
      flex: 1;
      vertical-align: middle;
      padding: 20px 0 0 10px;
      p:first-of-type {
        color: red;
        b {
          font-size: 18px;
        }
      }
    }
  }
  .bd {
    // padding: 10px;
    .color,
    .size {
      margin: 10px 0;
    }
    .color,
    .size {
      p {
        color: #000;
      }
      span {
        height: 30px;
        width: 50px;
        background: #eee;
        display: inline-block;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 5px;
        margin-right: 5px;
        font-size: 12px;
        &.selected {
          color: #fff;
          background: $baseColor;
        }
      }
    }
    .size {
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      padding: 10px 0;
    }
  }

  .my-button {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: static;
    bottom: 0;
    left: 0;
    height: 50px;
    line-height: 50px;
    z-index: 666;
    font-size: 18px;
    .mui-btn {
      flex: 50%;
    }
  }
}
</style>

